<!DOCTYPE html>
<html>
  <head>
    <link rel='match' href='nth_of_type_pseudo_b.html'>
    <title>:nth-of-type test</title>
    <style type="text/css">
      html { background: red; }
      /* Should match according to Selectors Level 4 (changed from Level 3) */
      html:nth-of-type(1) { background: white; }

      div > p,
      div > div,
      div > address {
          float: left;
          width: 20px;
          height: 20px;
          margin: 0px;
          margin-right: 10px;
          padding: 0px;
      }
      div > p {
          background: white;
      }
      div > div,
      div > address {
          background: black;
      }
      body > div { clear: both; margin-bottom: 10px; }

      #odd > .odd { background: red; }
      #odd > p:nth-of-type(odd) { background: green }

      #even > .even { background: red; }
      #even > p:nth-of-type(even) { background: green }

      #nth > .nth { background: red; }
      #nth > p:nth-of-type(3n+5) { background: green; }

      #nth2 > .nth2 { background: red; }
      #nth2 > p:nth-of-type(3n-5) { background: green; }

      #negativen > .negativen { background: red; }
      #negativen > p:nth-of-type(-2n+5) { background: green; }
    </style>
  </head>
  <body>
    <div id="odd">
      <p class="odd"> </p>
      <div> </div>
      <address> </address>
      <div> </div>
      <p> </p>
      <p class="odd"> </p>
      <div> </div>
      <p> </p>
      <p class="odd"> </p>
      <address> </address>
      <address> </address>
      <p> </p>
      <div> </div>
      <p class="odd"> </p>
      <p> </p>
    </div>
    <div id="even">
      <p> </p>
      <div> </div>
      <address> </address>
      <div> </div>
      <p class="even"> </p>
      <p> </p>
      <div> </div>
      <p class="even"> </p>
      <p> </p>
      <address> </address>
      <address> </address>
      <p class="even"> </p>
      <div> </div>
      <p> </p>
      <p class="even"> </p>
    </div>
    <div id="nth">
      <p> </p>
      <div> </div>
      <address> </address>
      <div> </div>
      <p> </p>
      <p> </p>
      <div> </div>
      <p> </p>
      <p class="nth"> </p>
      <address> </address>
      <address> </address>
      <p> </p>
      <div> </div>
      <p> </p>
      <p class="nth"> </p>
    </div>
    <div id="nth2">
      <p class="nth2"> </p>
      <div> </div>
      <address> </address>
      <div> </div>
      <p> </p>
      <p> </p>
      <div> </div>
      <p class="nth2"> </p>
      <p> </p>
      <address> </address>
      <address> </address>
      <p> </p>
      <div> </div>
      <p class="nth2"> </p>
      <p> </p>
    </div>
    <div id="negativen">
      <p class="negativen"> </p>
      <div> </div>
      <address> </address>
      <div> </div>
      <p> </p>
      <p class="negativen"> </p>
      <div> </div>
      <p> </p>
      <p class="negativen"> </p>
      <address> </address>
      <address> </address>
      <p> </p>
      <div> </div>
      <p> </p>
      <p> </p>
    </div>
  </body>
</html>
